<template>
	<view class="container">
		<view class="container-wrap">
			<scroll-view class="container-left" scroll-y="true" :style="fullHeight">
				<view v-for="(item,index) in areaData" :class="{selected:item.name == btnName}" @click="areaBtn(index)">{{item.name}}</view>
			</scroll-view>
			<scroll-view class="container-right" scroll-y="true" :style="fullHeight">
				<view class="container-right-top">
					<view>您当前的位置是<text>{{currentName}}</text></view>
				</view>
				<view class="container-right-middle">
					<view class="area-list-wrap" v-for="(item,index) in areaList">
						<view class="area-list" @click="goDetail(item.id,item.name)" :style="'background: url('+item.image+') no-repeat 0 0/cover;'">
							<view class="area-list-inner">
								<view class="area-main">{{item.name}}</view>
								<view class="area-sub">{{item.count}}间在售</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				areaData:[
					{
						id:0,
						name:'最热',
						children:[]
					}

				],
				areaList:[

				],

				currentName:'',
				btnName:'',
				fullHeight:''
			}
		},
		onLoad(option) {
			console.log(option)
			this.$data.currentName = option.address
			this.$data.btnName = option.address
			this.$api.hotRegions().then(res=>{
				console.log(res.data)
			this.areaData=	this.areaData.concat(res.data)
				let index=this.areaData.findIndex(item=>{
					return item.name== option.address
				})
				if(index!=-1){
						this.areaList=this.areaData[index].children
				}

			})
			this.$api.hotRegions1().then(res=>{
				this.areaData[0].children=res.data
			})

		},
		methods:{
			areaBtn(n){
				this.btnName = this.areaData[n].name
				let index=this.areaData.findIndex(item=>{
						return item.name== 	this.btnName
					})
					if(index!=-1){
							this.areaList=this.areaData[index].children
					}

			},
			goDetail(id,name){
				uni.navigateTo({
					url:"/pages/area/areaList?id=" + id+"&name="+name
				})
			},
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				success: function (res) {
					that.fullHeight ="height:" + res.windowHeight + "px";
				}
			});
		}
	}
</script>

<style>
	.container-wrap{
		display: flex;
		flex-direction: row;
	}
	.container-left{
		display: flex;
		flex-direction: column;
		width: 230rpx;
		height: 500rpx;
		margin-right: 10rpx;
	}
	.container-left view{
		width: 230rpx;
		height: 95rpx;
		line-height: 95rpx;
		background-color: #f1f1f1;
		text-align: center;
		border-bottom: 1px solid #dfdfdf;
	}
	.container-left view.selected{
		background-color: #fff;
	}
	.container-right-top{
		width: 485rpx;
		height: 100rpx;

		background: url(https://pic.fhshidai.com/fileEG0o6bmkbwEKpn4VhTenUxDc0cDqvfO9y0ycRVg8.png) no-repeat 0 0;
		background-size: 100% 100%;
		margin-bottom: 16rpx;
	}
	.container-right-top view{
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 70rpx;
		font-size: 22rpx;
		color: #4f5356;
	}
	.container-right-top view text{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		margin-left: 10rpx;
	}
	.container-right-middle{
		overflow: hidden;
		width: 485rpx;
	}
	.area-list-wrap{
		float: left;
		width: 50%;
		height: 210rpx;
		box-sizing: border-box;
		margin-bottom: 15rpx;
	}
	.area-list{
		position: relative;
		height: 210rpx;
		margin: 0 6rpx;
		border-radius: 10rpx;
	}
	.area-list-inner{
		position: absolute;
		top: 0;
		width: 100%;
		height: 210rpx;
		background-color: rgba(0,0,0,0.5);
		z-index: 100;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.area-main{
		font-size: 34rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}
	.area-sub{
		font-size: 24rpx;
		color: #fff;
	}
</style>
